<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢庆注册会员</title>
    <style>
        h3{
            color: blue;
        }
        .name{
            color: red;
        }
        .name1{
            display: inline-block;
            width: 80px;
            text-align: right;
            font-weight:bold;
        }
        .name2{
            font-weight: bold;
        }
        .name3{
            font-weight: bold;
           text-align: center left;
        }
        div label{
           align-content: center;
        }
        div {
            display: flex;

        }
        
    </style>
</head>
<body>
    <h3>欢庆注册会员</h3>
    <label class="name1">手机密码：</label>
    <input type="text" placeholder="11位手机号">
    <label class="name">必填</label>
    <br><br>
    <label class="name1">创建密码：</label>
    <input type="password" placeholder="8位密码">
    <label class="name">必填</label>
    <br><br>
    <label class="name1">注册邮箱：</label>
    <input type="text" placeholder="例如wustzz@sina.com">
    <label class="name">必填</label>
    <br><br>
    <label class="name1">验证码：</label>
    <input type="text">
    <button>zuzY</button>
    <br><br>
    <label class="name1">性别：</label>
    <label>男<input type="radio" name="gender"></label> 
    <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女<input type="radio" name="gender"></label>
    <br><br>
    <label class="name1">生日：</label>
    <input type="date" class="name2" >
    <br><br>
    <label class="name1">年龄：</label>
    <input type="text">
    <br><br>
    <label class="name1">籍贯：</label>
    <select>
        <option selected>湖北</option>
    </select>
    <select>
        <option>咸宁</option>
        <option>宜昌</option>
        <option>荆州</option>
        <option>襄阳</option>
        <option selected>武汉</option>
    </select>
    <br><br>
    <label class="name1">个人学历：</label>
    <select>
        <option>博士</option>
        <option>硕士</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
    <br><br>
    <form >
        <label class="name1">月薪：</label>
        <input type="range" min="3000" max="6000" step="15" value="4000">
    </form>
    <br>
    <label class="name1">个人爱好：</label>
    <label><input type="checkbox" name="like">唱歌</label>
    <label><input type="checkbox" name="like">跑步</label>
    <label><input type="checkbox" name="like">游泳</label>
    <br><br>
    <label class="name1">个人照片：</label>
    <input type="file">
    <br><br>
    <div>
        <label class="name3">个人简介：</label>
        <textarea cols="30" rows="10"></textarea>
    </div>
        
    <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
</body>
</html>